﻿
@{
    Layout = null;
}

<div>
    <div class="col-3 pr-0" style="display: none">
        <label id="SAMPLE-SelectSpec-AnalyteId">@ViewData["AnalyteId"]</label>
    </div>
    <div class="input-group">
        <div class="col-3 pr-0 pl-0">
            <span class="input-group-text font-rfs-modal border-radius-noright noRightBorder">一级分类</span>
        </div>
        <div class="col-9 pl-0">
            <select id="SAMPLE-SelectSpec-FirstGroup" class="form-control font-rfs-modal border-radius-noleft"></select>
        </div>
    </div>
    <div class="input-group" style="padding-bottom: 10px;">
        <div class="col-3 pr-0 pl-0">
            <span class="input-group-text font-rfs-modal border-radius-noright noRightBorder">二级分类</span>
        </div>
        <div class="col-9 pl-0">
            <select id="SAMPLE-SelectSpec-SecondGroup" class="form-control font-rfs-modal border-radius-noleft"></select>
        </div>
    </div>
</div>
<div class="table-responsive-sm modal-table-shadow p-0 bg-white rounded col-md-12 pre-scrollable" style="height: 40vh;">
    <table id="SAMPLE-SelectSpec-SpecList" class="table table-striped table-bordered-modal table-sm table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>代码</th>
                <th>名称</th>
                <th>描述</th>
            </tr>
        </thead>
        <tbody style="font-size: calc(0.6em + 0.1vw) !important"></tbody>
    </table>
</div>
<div class="text-right" style="padding-top: 5px;">
    <button id="SAMPLE-SelectSpec-empty" type="button" class="btn btn-info font-rfs-modal">置空</button>
    <button id="SAMPLE-SelectSpec-confirm" type="button" class="btn btn-primary font-rfs-modal" disabled="disabled">确定</button>
    <button id="SAMPLE-SelectSpec-cancel" type="button" class="btn btn-info font-rfs-modal">取消</button>
</div>

<script>
    var SelectSpec_specId = ""; 
    
    /*页面加载时，加载 一级分类 信息*/
    $.post("GetSpecFirstGroup", { 
        //Type: type  // 传递的参数，对应控制器里的参数
    }, function (data) {
        for (var i = 0; i < data.length; i++) {
            $("#SAMPLE-SelectSpec-FirstGroup").append(new Option(data[i].firstGroup));
        }
        $("#SAMPLE-SelectSpec-FirstGroup").prepend(new Option("", ""));
        $("#SAMPLE-SelectSpec-FirstGroup").val("");
    });

    $("#SAMPLE-SelectSpec-FirstGroup").change(function () {
        SelectSpec_specId = "";  /*表格刷新时置空*/
        $("#SAMPLE-SelectSpec-confirm").attr("disabled", true);
        $.post("GetSpecSecondGroup", { /* 加载 二级分类 信息*/
            FirstGroup: $("#SAMPLE-SelectSpec-FirstGroup").find("option:selected").text()  // 传递的参数，对应控制器里的参数
        }, function (data) {
            $("#SAMPLE-SelectSpec-SecondGroup").empty();
            for (var i = 0; i < data.length; i++) {
                $("#SAMPLE-SelectSpec-SecondGroup").append(new Option(data[i].secondGroup));
            }
            $("#SAMPLE-SelectSpec-SecondGroup").prepend(new Option("", ""));
            $("#SAMPLE-SelectSpec-SecondGroup").val("");

            /*此处把表格代码写在这里是要等待第一个post请求完成，然后在执行这个，否则两个post一块执行就会报错。EF不支持同一实例的并行。*/
            var columns = [{ field: "id", visible: false }, { field: "code" }, { field: "name" }, { field: "description" }];
            $('#SAMPLE-SelectSpec-SpecList').bootstrapTable('destroy'); // 这行代码必须加，否则数据无法刷新
            $('#SAMPLE-SelectSpec-SpecList').bootstrapTable({
                method: 'post',
                url: "GetSpecListByFirstGroup",
                dataType: "json",  // 服务器端返回值类型
                contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 如果是 POST 请求，这个属性必须加
                queryParams: function (params) {
                    var data = {
                        FirstGroup: $("#SAMPLE-SelectSpec-FirstGroup").find("option:selected").text(),  // 传递的参数，这的名称要和控制器里对应的参数名称一样
                    };
                    return data;
                }, //参数
                queryParamsType: "search", //参数格式,发送标准的RESTFul类型的参数请求

                uniqueId: "id",          // 设置主键
                locale: "zh-CN",
                columns: columns,          // 加载列定义, 注意！这个地方绑定的列名称开头大写字母会全部变成小写。
                onClickRow: function (row, $element, field) {
                    $("#SAMPLE-SelectSpec-SpecList").find("tbody").find("tr").each(function () {
                        $(this).removeClass('changeblueColor');
                    });
                    $element.addClass("changeblueColor");
                    $("#SAMPLE-SelectSpec-confirm").attr("disabled", false);
                    SelectSpec_specId = row.id;
                },
                silent: true,  //刷新事件必须设置
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () {  //没有匹配的结果
                    return '无符合条件的记录';
                },
                onLoadError: function (data) {
                    $('#SAMPLE-SelectSpec-SpecList').bootstrapTable('removeAll');
                },
                onLoadSuccess: function (data) {   // 数据加载成功后触发该事件
                    $('.fixed-table-toolbar').css("height", "0px"); /* 隐藏表格上的工具栏 */
                }
            });
        });

    });

    $("#SAMPLE-SelectSpec-SecondGroup").change(function () {
        SelectSpec_specId = "";  /*表格刷新时置空*/

        $('#SAMPLE-SelectSpec-SpecList').bootstrapTable('destroy'); // 这行代码必须加，否则数据无法刷新
        $("#SAMPLE-SelectSpec-confirm").attr("disabled", true);
        var columns = [{ field: "id", visible: false }, { field: "code" }, { field: "name" }, { field: "description" }];
        $('#SAMPLE-SelectSpec-SpecList').bootstrapTable({
            method: 'post',
            url: "getSpecListFirstAndBySecond",
            dataType: "json",  // 服务器端返回值类型
            contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 如果是 POST 请求，这个属性必须加
            queryParams: function (params) {
                var data = {
                    FirstGroup: $("#SAMPLE-SelectSpec-FirstGroup").find("option:selected").text(),  // 传递的参数，这的名称要和控制器里对应的参数名称一样
                    SecondGroup: $("#SAMPLE-SelectSpec-SecondGroup").find("option:selected").text(),
                };
                return data;
            }, //参数
            queryParamsType: "search", //参数格式,发送标准的RESTFul类型的参数请求

            uniqueId: "id",          // 设置主键
            locale: "zh-CN",
            columns: columns,          // 加载列定义, 注意！这个地方绑定的列名称开头大写字母会全部变成小写。
            onClickRow: function (row, $element, field) {
                $("#SAMPLE-SelectSpec-SpecList").find("tbody").find("tr").each(function () {
                    $(this).removeClass('changeblueColor');
                });
                $element.addClass("changeblueColor");
                $("#SAMPLE-SelectSpec-confirm").attr("disabled", false);
                SelectSpec_specId = row.id;
            },
            silent: true,  //刷新事件必须设置
            formatLoadingMessage: function () {
                return "请稍等，正在加载中...";
            },
            formatNoMatches: function () {  //没有匹配的结果
                return '无符合条件的记录';
            },
            onLoadError: function (data) {
                $('#SAMPLE-SelectSpec-SpecList').bootstrapTable('removeAll');
            },
            onLoadSuccess: function (data) {   // 数据加载成功后触发该事件
                $('.fixed-table-toolbar').css("height", "0px"); /* 隐藏表格上的工具栏 */
            }
        });

    });

    $("#SAMPLE-SelectSpec-cancel").click(function (event) {
        var modalID = $("#ModalID").html();
        $("#" + modalID).modal('hide');
    });

    $("#SAMPLE-SelectSpec-confirm").click(function () {
        var row = $("#SAMPLE-SelectSpec-SpecList").bootstrapTable('getRowByUniqueId', SelectSpec_specId); // 获得行数据
        $.post("postUpdateAnalyteByIDD", {
            Id: $("#SAMPLE-SelectSpec-AnalyteId").html(),
            DefaultSpecId: row.id,
            DefaultSpecName: row.name
        }, function (data) {
            alert(data);
            $("#SAMPLE-SelectSpec-cancel").click();
        });
    });

    $("#SAMPLE-SelectSpec-empty").click(function () {
        $.post("postUpdateAnalyteByIDD", {
            Id: $("#SAMPLE-SelectSpec-AnalyteId").html(),
            DefaultSpecId: '',
            DefaultSpecName: ''
        }, function (data) {
            alert(data);
            $("#SAMPLE-SelectSpec-cancel").click();
        });
    });

</script>
